@color-gray: #fff;
@color-green: #264863;
@font-family: 'Helvetica Neue', Helvetica, Arial, "Microsoft YaHei", sans-serif;

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}

* {
	.box-sizing(border-box);
	user-select: none;
}

.border-radius(@radius) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}

.box-sizing(@sizing) {
	-webkit-box-sizing: @sizing;
	-moz-box-sizing: @sizing;
	box-sizing: @sizing;
}

body {
	color: #333;
	font-size: 15px;
	line-height: 1.4;
	font-family: @font-family;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	background-color: #eee;
	overflow: auto;
	padding-top: 5px;
	@media screen and (max-width: 1024px) {
		padding-top: 0;
	}

	@media print {
		font-size: 16px;
		padding-top: 0;
	}
}


.content {
	position: relative;
	width: 1024px;
	margin: 30px auto;
	.border-radius(5px);
	background-color: #fff;
	overflow: hidden;
	@media screen and (max-width: 1024px) {
		width: 100%;
		margin: 0;
		.border-radius(0);
	}
	@media print {
		margin: 0 auto;
	}
}


.content-hd {
	width: 100%;
	padding: 15px 15px 20px;
	color: #fff;
	background-color: @color-green;
	overflow: hidden;


	@media screen and (max-width: 720px) {
		padding: 25px 30px;
	}
	@media print {
		color: #000;
		background-color: #fff;
		padding: 0;
	}

	.person {
		width: 30%;
		float: left;

		font-size: 52px;
		font-weight: 300;
		overflow: hidden;
		padding-bottom: 5px;
		padding-right: 10px;

		border-right: 1px solid darken(@color-green, 2%);

		@media screen and (max-width: 720px) {
			width: 100%;
			text-align: center;
		}

		.name {
			text-align: center;


			h1 {
				font-family: "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", @font-family;
				font-weight: 500;
				letter-spacing: 5px;
				@media screen and (max-width: 720px) {
					letter-spacing: 0;
					line-height: 1.25;
					margin-top: 10px;
				}
				@media screen and (max-width: 720px) {
					width: 100%;
					text-align: center;
				}
			}
		}

		.job {
			text-align: center;

			h2 {
				display: inline-block;
				font-size: 24px;
				@media screen and (max-width: 720px) {
					border-top: 1px solid darken(#000, 2%);
					margin: 5px auto 0;
					padding: 10px;
				}
			}
		}


	}

	.person-info {
		width: 70%;
		float: right;
		padding-left: 20px;

		@media screen and (max-width: 720px) {
			width: 100%;
			text-align: center;
		}

		.works,
		.info {
			width: 50%;
			float: left;
			padding: 0 10px;

			@media screen and (max-width: 720px) {
				width: 100%;
				text-align: center;
			}

			ul {
				list-style: none;
				line-height: 20px;
				@media screen and (max-width: 720px) {
					text-align: center;
					margin: 16px 0 0;
				}

				& > li {
					line-height: 35px;
					@media screen and (max-width: 720px) {
						display: inline-block;
					}

					& > a {
						color: #fff;
						@media print {
							color: #000;
						}
						font-family: "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", @font-family;

						&:hover {
							color: #e8e8e8;
						}

						.contact-link {
							@media screen and (max-width: 720px) {
								display: none;
							}
						}
					}
				}
			}
		}

		.works {
			padding-left: 15px;
			text-align: right;
		}

	}


}


.content-bd {
	width: 100%;
	min-height: 200px;
	padding: 5px 25px 35px;
	overflow: hidden;

	.section-hd {
		position: relative;
		height: 26px;
		margin: 10px auto 15px;
		overflow: hidden;
	}

	.section-title-r {
		position: absolute;
		top: 50%;
		display: inline-block;
		width: 88%;
		height: 0;
		vertical-align: middle;
		border-top: 1px solid #ededed;
		@media print {
			width: 95%;
		}
	}

	.section-title-r {
		right: 0;
	}

	.section-title {
		position: relative;
		z-index: 1;
		width: 10%;
		min-width: 100px;
		padding: 2px 5px;
		.border-radius(32px);
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		background-color: #eee;
		@media print {
			padding: 3px 0px;
			text-align: left;
			font-size: 18px;
		}
	}

	.section-bd {
		overflow: hidden;

		ul {
			li {
				margin-top: 8px;
				list-style: square inside;
			}
		}

		.section-list {
			padding: 10px 0 5px;
		}

		.item {
			margin-bottom: 30px;
			padding-left: 10px;

			.table {
				width: 100%;

				.table-head {
					font-weight: bold;
				}
			}

			.item-line {
				margin-bottom: 13px;

				.item-name {
					float: left;
					text-align: right;
					width: 80px;
					padding-right: 12px;
					font-weight: bold;
				}

				.item-bold {
					font-weight: bold;
				}

				.item-content {
					margin-left: 80px;
					text-align: left;
				}
			}
		}

		.item-bd {
			margin-bottom: 5px;
		}

		.section-content {
			text-align: justify;
			word-break: break-all;
			line-height: 22px;
			@media print {
				line-height: 21px;
			}

			em {
				display: inline-block;
				font-family: Menlo, @font-family;
				font-size: 12px;
				line-height: 14px;
				border: 1px solid @color-gray;
				.border-radius(3px);
				margin: 2px;
				padding: 0 3px;
				background-color: #f7f7f7;
			}

			strong {
				font-family: @font-family;
				font-size: 12px;
				line-height: 14px;
				border: 1px solid #f3f3f3;
				.border-radius(3px);
				font-weight: 500;
				color: #444;
				margin: 2px;
				padding: 0 3px;
				background-color: #f6f6f6;
			}
		}
	}
}

.btn {
	display: inline-block;
	color: @color-green;
	font-family: Menlo, @font-family;
	text-align: center;
}

.important-text {
	font-weight: bold;
	color: @color-green;
}

.text-padding {
	padding: 0 4px;
}
